// 药师审方

<template>
  <div class="trial">
    <h3 class="title">
      <span>药师审方</span>
      <hr />
    </h3>
    <!-- 数据显示3条，不分页 -->
    <template v-if="auditList && auditList.length < 4">
      <div class="wrap" v-for="(audit, i) in auditList" :key="i">
        <div class="user">{{ audit.patient_name }}</div>
        <div class="type">
          处方类型:
          <span>{{ audit.type_text }}</span>
          <button @click="changeState(audit)">查看</button>
        </div>
        <div class="date">
          申请时间:
          <span>{{ audit.add_time }}</span>
        </div>
      </div>
    </template>
    <!-- 数据大于3条 分页显示 -->
    <template v-if="auditList && auditList.length >= 4">
      <div class="wrap" v-for="(audit, i) in currentAuditList" :key="i">
        <div class="user">{{ audit.patient_name }}</div>
        <div class="type">
          处方类型:
          <span>{{ audit.type_text }}</span>
          <button @click="changeState(audit)">查看</button>
        </div>
        <div class="date">
          申请时间:
          <span>{{ audit.add_time }}</span>
        </div>
      </div>
      <div class="pagination">
          <el-pagination 
            background 
            layout="prev, pager, next" 
            :total="auditList.length" 
            :page-size="3"
            @current-change="handleCurrentChange"
          ></el-pagination>
      </div>
      
    </template>
  </div>
</template>

<script>
export default {
  props: ["auditList"],
  data() {
    return {
      currentAuditList: []
    };
  },
  created() {
    this.currentAuditList = this.auditList.slice(0, 3);
  },
  methods: {
    changeState(audit) {
      // 查看处方单时讲处方单号传递过去
      console.log(audit)
      this.$emit("changeState", 2, audit.p_code);
    },
    handleCurrentChange(val) {
      // val 表示当前页
      this.currentAuditList = this.auditList.slice((val - 1) * 3, (val - 1) * 3 + 3)
    }
  }
};
</script>

<style lang="less" scoped>
.trial {
  width: 1200px;
  height: 600px;
  margin: 0 auto 100px;
  position: relative;
}
.trial .title {
  font-size: 22px;
  font-weight: 400;
  margin-top: 50px;
  margin-left: 35px;
  margin-bottom: 20px;
}
.trial .wrap {
  background: #fbfbfb;
  border: 1px solid #f5f5f5;
  padding-left: 50px;
  padding-top: 20px;
  padding-bottom: 30px;
  margin-bottom: 20px;
  font-size: 14px;
  button {
    width: 60px;
    height: 25px;
    outline: 0;
    cursor: pointer;
    float: right;
    margin-right: 40px;
    border-radius: 5px;
  }
}
.trial .wrap div {
  margin-top: 8px;
  color: #656565;
}
.trial .wrap div.user {
  color: #71c0d6;
  font-size: 20px;
  margin-bottom: 10px;
}
hr {
  border: none;
  width: 1000px;
  height: 2px;
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 5px;
  background-color: #f5f5f5 !important;
}
.pagination /deep/ {
  .el-pagination {
    position: absolute;
    bottom: -10px;
    width: 100%;
    text-align: center;
  }
}
</style>